<section class="content-header">
  <h1>
    Dashboard
    <small></small>
  </h1>
  
  <ol class="breadcrumb" style="top: 5px;">
  	<button type="button" class="btn btn-default pull-right" id="daterange-btn">
    <i class="fa fa-calendar"></i> 
    <span id="daterange-span">Date range picker</span>
    <i class="fa fa-caret-down"></i>
  </button>
	</ol>

</section>

<section class="content">
  <!-- Small boxes (Stat box) -->
  <div class="row">
    <div class="col-lg-3 col-xs-6">
      <!-- small box -->
      <div class="small-box bg-aqua">
        <div class="inner">
          <h3>{{json.countPeople}}</h3>
          <p>新增用户</p>
        </div>
        <div class="icon">
          <i class="ion ion-bag"></i>
        </div>
        <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
      </div>
    </div>
    <!-- ./col -->
    <div class="col-lg-3 col-xs-6">
      <!-- small box -->
      <div class="small-box bg-green">
        <div class="inner">
          <h3>{{json.countVisitor}}</h3>
          <p>累计新访客</p>
        </div>
        <div class="icon">
          <i class="ion ion-stats-bars"></i>
        </div>
        <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
      </div>
    </div>
    <!-- ./col -->
    <div class="col-lg-3 col-xs-6">
      <!-- small box -->
      <div class="small-box bg-yellow">
        <div class="inner">
          <h3>{{json.countOrder.count}}</h3>

          <p>订单总数</p>
        </div>
        <div class="icon">
          <i class="ion ion-person-add"></i>
        </div>
        <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
      </div>
    </div>
    <!-- ./col -->
    <div class="col-lg-3 col-xs-6">
      <!-- small box -->
      <div class="small-box bg-red">
        <div class="inner">
          <h3>${{json.countOrder.allTotal}}</h3>

          <p>订单总额</p>
        </div>
        <div class="icon">
          <i class="ion ion-pie-graph"></i>
        </div>
        <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
      </div>
    </div>
    <!-- ./col -->
  </div>
  <!-- /.row -->
  
  
  <!-- Main row -->
	<div class="row">
		<div class="col-lg-6">
			<div class="nav-tabs-custom" style="cursor: move;">
				<!-- Tabs within a box -->
				<ul class="nav nav-tabs pull-right ui-sortable-handle">
					<li class="pull-left header"><i class="fa fa-inbox"></i> 用户统计</li> <!-- 回访用户，新用户 -->
				</ul>
				<div class="tab-content no-padding">
					<div id="echartPeople" style="height:400px;"></div>
				</div>
			</div>
		</div>

		<div class="col-lg-6">
			<div class="nav-tabs-custom" style="cursor: move;">
				<!-- Tabs within a box -->
				<ul class="nav nav-tabs pull-right ui-sortable-handle">
					<li class="pull-left header"><i class="fa fa-inbox"></i> 购物车统计</li><!-- 未下单的商品数 / 已下单的商品数 -->
				</ul>
				<div class="tab-content no-padding">
					<div id="echartCart" style="height:400px;"></div>
				</div>
			</div>
		</div>


		<div class="col-lg-6">
			<div class="nav-tabs-custom" style="cursor: move;">
				<!-- Tabs within a box -->
				<ul class="nav nav-tabs pull-right ui-sortable-handle">
					<li class="pull-left header"><i class="fa fa-inbox"></i> 订单数统计</li><!-- 成功支付/ 失败支付 -->
				</ul>
				<div class="tab-content no-padding">
					<div id="echartOrder" style="height:400px;"></div>
				</div>
			</div>
		</div>
		
				<div class="col-lg-6">
			<div class="nav-tabs-custom" style="cursor: move;">
				<!-- Tabs within a box -->
				<ul class="nav nav-tabs pull-right ui-sortable-handle">
					<li class="pull-left header"><i class="fa fa-inbox"></i> 订单额统计</li><!-- 每日订单额 -->
				</ul>
				<div class="tab-content no-padding">
					<div id="echartAmount" style="height:400px;"></div>
				</div>
			</div>
		</div>
	</div>	
</section>

<script src="_cdn/lib/echarts.min.js"></script>